<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="{$url_css}bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="{$url_css}sweet-alert.css" type="text/css">
    <script type="text/javascript" src="{$url_js}jquery-1.12.0.min.js"></script>
    <script type="text/javascript" src="{$url_js}bootstrap.min.js"></script>
    <script type="text/javascript" src="{$url_js}echarts.common.min.js"></script>
    <script type="text/javascript" src="{$url_js}calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="{$url_js}sweet-alert.min.js"></script>

    <title>金果注册统计管理</title>
</head>
<body>
<br/>
<div style="width:96%" class="container">
    <table class="table table-striped table-bordered">
        <tr>
            <td colspan="3" class="text-center">查询条件</td>
        </tr>
        <tr>
            <td class="form-inline">
                <div class="input-group">
                    <div class="input-group-addon">开始时间</div>
                    <input class="form-control" id="str_date"  type="text" onFocus="WdatePicker({literal}{dateFmt:'yyyy-MM-dd HH:00:00',maxDate:'%y-%M-%d #{%H}'}{/literal});" value="{$data['str_day']}" readonly="">
                </div>
            </td>
            <td class="form-inline">
                <div class="input-group">
                    <div class="input-group-addon">结束时间</div>
                    <input class="form-control" id="end_date" type="text" onFocus="WdatePicker({literal}{dateFmt:'yyyy-MM-dd HH:00:00',maxDate:'%y-%M-%d #{%H}'}{/literal});" value="{$data['end_day']}" readonly="">
                </div>
            </td>
            <td class="form-group col-xs-2">
                <input type="submit" onclick="selectFrom()" value="搜索" class="btn btn-primary" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
            <div id="main" style="height: 600px;"></div>
           </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var mian = document.getElementById("main");
    var myChart = echarts.init(mian);
    var data = {
        title:'金果注册统计',
        legend:['注册数'],
        xAxis:["{implode('","',$data['date'])}"],
        series:[
            {
                name:'注册数',
                type: 'bar',
                data: [{implode(',',$data['type_reg'])}]
            }
        ]
    };
    myChart.setOption(optionObj(data));


    function selectFrom(){
        var str = $("#str_date").val();
        var end = $("#end_date").val();

        var a = Date.parse(str);
        var b = Date.parse(end);

        if(a>b){
            sweetAlert('日期错误!','开始时间不能大于结束时间！','error');
            return;
        }
        if((b-a+1)/86400000 > 7){
            sweetAlert('日期范围溢出','开始时间与结束时间不能大于7天！','error');
            return;
        }
        $.ajax({
            url: '?do=ajaxSelect',
            type: "GET",
            data: 'str_date=' + str +'&end_date=' + end,
            dataType: "json",
            success: function (json) {
                if (json.result != 'success'){
                    alert('查询失败，请稍后再试！');
                    return;
                } else {
                    var data = json.data;

                    myChart.setOption(optionObj({
                        title:'注册统计',
                        legend:['注册数'],
                        xAxis:data.date,
                        series:[
                            {
                                name:'注册数',
                                type: 'bar',
                                data: data.type_reg
                            }
                        ]
                    }));
                }
            }
        });
    }

    function optionObj(data){
        var Obj = {
            title: {
                text: data.title
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                feature: {
                    magicType: { show: true, type: ['line', 'bar'] }
                }
            },
            legend: {
                data:data.legend
            },
            xAxis: {
                data: data.xAxis
            },
            yAxis: {},
            series: data.series
        };
        return Obj

    }
</script>
</body>

</html>